<template>
  <div class="home">
    <van-nav-bar
      title="学生成绩管理系统"
      left-text="添加"
      right-text="筛选"
      @click-left="$router.push('/about')"
      @click-right="show = true"
    />
    <my-card
      v-for="(item, index) in list"
      :key="index"
      :itemObj="item"
      @click="$router.push(`/about?i=${index}`)"
    ></my-card>
    <van-popup v-model:show="show" round position="bottom">
      <div class="pop-ct">
        <van-button :plain="checks!=='优秀'" type="primary" @click="filt('优秀')">优秀</van-button>
        <van-button :plain="checks!=='良好'" type="success" @click="filt('良好')">良好</van-button>
        <van-button :plain="checks!=='末班'" type="danger" @click="filt('末班')">末班</van-button>
      </div>
    </van-popup>
  </div>
</template>

<script>
import { useStore } from "vuex";
import { computed, ref } from "vue";
import myCard from "../components/myCard";
export default {
  name: "HomeView",
  components: { myCard },
  setup(props) {
    const show = ref(false); // 筛选弹出窗的显示隐藏
    const { state } = useStore();
    const list = ref(state.list); // 从vuex 里面获取成绩列表
    const checks = ref(''); // 筛选选中的数据
    const filt = (val) => { // 筛选函数  
      // val 代表的是筛选的文字
     checks.value = checks.value == val?null:val;
     if (checks.value){
       list.value = state.list.filter(item => item.txt == checks.value);
     } else {
       list.value = state.list;
     }
    }
    return {
      list,
      show,
      filt,
      checks
    };
  },
};
</script>
<style lang="scss" scoped>
.home {
  height: 100%;
  background: #e9e9e9;
  .pop-ct{
    height: 260px;
    background: #fff;
    padding: 30px 15px;
    box-sizing: border-box;
    .van-button{
      margin-right: 10px;
    }
  }
}
</style>
